<template>
  <div class="cartcontrol">
  	 <transition name="fade">
        <div class="cart-decrease " v-show="food.count>0" @click.stop.prevent="decreasecart($event)"  >
	  	 	<span class="inner icon-remove_circle_outline" ></span>
	    </div>	
	 </transition>
        <div class="cart-count" v-show="food.count>0">{{food.count}}</div>
        <div class="cart-add icon-add_circle" @click.stop.prevent="addcart($event)" ></div>
  </div>
</template>

<script>
import Vue from 'vue'
export default {
  name: 'cartcontrol',
  props:{
  	food:{
  		type:Object
  	}
  	,xl:{
  		type:Number
  	}
  },
  created(){
  },
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  },
  methods:{
  	addcart(event){ //左侧加减按钮 商品数量多少
		if(!event._constructed){
			console.log("tu")
			return false;
		}
  		if(!this.food.count){
  		    Vue.set(this.food,'count',1)
  		}else{
  			this.food.count=this.food.count+1;
  			console.log("n 在哪里")
  		}
		console.log(!event._constructed)
  		//this.$emit("cart",event.target)//派发一个组件方法
//		console.log(event.target)
  	},
  	
      
      
  	decreasecart(event){ //减法运算
  		console.log("ss")
  		if(!event._constructed){
			return;
		}
  		if(this.food.count){
  			this.food.count--
  		}
  		console.log("cd")
  	}
  }

}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less"  scoped>
		.cartcontrol{
			font-size: 0;
			.cart-decrease{
				  display: inline-block;
			      padding: 6px;
			      transition: all .6s linear;
			      &.fade-enter-active,&.fade-leave-active{
					    opacity: 1;
					    transform: translate3d(0, 0, 0);
					}
				   .inner{
						 	display: inline-block;
							line-height: 24px;
							font-size: 24px;
							color: rgb(0,160,220);
							transition: all .6s linear;
							transform: rotate(180);
				    }
			        &.fade-enter,&.fade-leave-to{
					    opacity: 0;
					    transform: translate3d(24px, 0, 0);  
					}
		     }
			.cart-count{
				display: inline-block;
				vertical-align: top;
				width: 12px;
				padding-top: 6px;
				line-height: 24px;
				text-align: center;
				font-size: 10px;
				color: rgb(147,153,259);
			}
			.cart-add{
				display: inline-block;
				line-height: 24px;
				font-size: 24px;
				padding: 6px ;
				color: rgb(0,160,220);
			}
		}

</style>
